<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>

<div>
    // 分页查询 改成用数据 ，添加 修改删除，并且能够分页查询
    <table style="width: 90%" id="tbUser">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    当前第<span id="currenPage"></span>页，总共<span id="total"></span>条记录，<a id="pre">上一页</a> <a id="next">下一页</a>
</div>
<script>
    // get: 查询，post: 新增、修改、删除
    // get: 查询 post：添加 put：全量修改 delete：删除 patch： 局部修改

    // 当前在第几页
    let page = 1;
    // 每页显示第记录数
    let pageSize = 10;
    let maxPage = 0;
    $(function () {
        renderData();

        $("#pre").click(function () {
            if (page <= 1) {
                return;
            }
            page = page - 1;
            renderData();
        })

        $("#next").click(function () {
            if (page >= maxPage) {
                return;
            }
            page = page + 1;
            renderData();
        })
    })

    function renderData() {

        // 给id为currenPage的html元素设值
        $("#currenPage").text(page);
        $.ajax({
            url: "user/pagequery",
            type:"get", // post,put
            data: {
                page: page,
                pageSize: pageSize
            },
            success: function (data) {
                // data 后端返回的数据
                // console.log(data) 控制日志
                let rows = data.rows;
                let total = data.total;
                maxPage = Number(total / pageSize) + (total % pageSize == 0 ? 0 : 1)
                $("#total").text(total);
                // 查找id为tbUser下的子标签为tbody的元素
                let tbody = $("#tbUser").find("tbody");
                // tbody标签下的所以的tr删除
                tbody.find("tr").remove();
                let content = "";
                for (let i = 0; i < rows.length; i++) {
                    content += "<tr><td>" + rows[i]["id"] + "</td><td>" + rows[i]["name"] + "</td><td>" + rows[i]["age"] + "</td></tr>";
                }
                // tbody追加子元素
                tbody.append(content);
            }
        });
    }
</script>
</body>
</html>